﻿<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <link th:href="@{/css/menu.css}" rel="stylesheet"/>
    <style>

    </style>
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-side" style="background: #f5f5f5;">
        <div class="layui-row " style="padding: 5px 10px;border-bottom: 1px solid #ccc;">
            <div class="layui-col-md6" style="line-height: 30px;">
                网页收藏
            </div>
            <div class="layui-col-md6" style="text-align: right;line-height: 30px;">
                <a data-id="2" class="layui-btn layui-btn-normal layui-btn-xs action-catalog_add_favorite">新增类目</a>
            </div>
        </div>
        <div class="" id="favorite-catalog-data"></div>
    </div>
    <div class="layui-body" style="top: 0px;left: 250px;">
        <div class="layui-body-nav">云收藏 / 收藏列表 <a data-id="2"
                                                  class="layui-btn layui-btn-normal layui-btn-xs action-add_favorite">添加收藏</a>
            <button type="button" class="layui-btn layui-btn-xs" id="test3"><i class="layui-icon">&#xe67c;</i>导入</button>
            <a class="layui-btn layui-btn-xs favorite-export">导出</a>
        </div>
        <table class="layui-hide" id="table-favorite" lay-filter="table-favorite"></table>
    </div>
</div>
<script type="text/html" id="barSetting">
    <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-xs" lay-event="delete">删除</a>
</script>
<!-- layui规范化用法 -->
<script type="text/javascript">
    var catalogId = 0;
    var table = null;

    workUtils.onclick(".layui-icon-menu", function (c) {
        $(".widget-menu").hide();
        $(c).next().toggle();
    });
    workUtils.onclick(".layui-rowitem", function (c) {
        catalogId = $(c).attr("data-id");
        loadFavorite(catalogId);
        $("#favorite-catalog-data .layui-rowitem-active").removeClass("layui-rowitem-active");
        $(c).addClass("layui-rowitem-active");
    });
    workUtils.onclick(".action-catalog_add_favorite", function () {
        workUtils.put("id", null);
        workUtils.open({url: "../web/favorite/addcatalog.html", title: "添加类目"}, function () {
            loadFavoriteCatalog();
        });
    });
    workUtils.onclick(".action-catalog_edit_favorite", function (c) {
        var id = $(c).attr("data-id");
        workUtils.put("id", id);
        workUtils.open({url: "../web/favorite/addcatalog.html", title: "修改目录"}, function () {
            loadFavoriteCatalog();
        });
    });
    workUtils.onclick(".action-catalog_delete_favorite", function (c) {
        var id = $(c).attr("data-id");
        workUtils.delete('../favorite/deletecatalog/' + id, function () {
            loadFavoriteCatalog();
        });
    });
    workUtils.onclick(".action-add_favorite", function (e) {
        workUtils.open({url: "../web/favorite/add.html", title: "添加收藏"}, function () {
            loadFavorite(catalogId);
        });
    });
    workUtils.onclick(".favorite-export", function (e) {
        location.href = "../favorite/export";
    });


    function loadFavorite(catalogId) {
        table.reload("table-favorite", {
            where: {
                catalogId: catalogId
            }
        });
    }
    function loadFavoriteCatalog() {
        workUtils.ajaxGet('../favorite/listcatalog', {}, function (data) {
            var html = '<div>';
            html += '<div class="layui-row layui-rowitem layui-rowitem-active" data-id="0"><div class="layui-col-md12" style="line-height: 30px;">';
            html += '全部收藏</div></div>';
            for (var i = 0; i < data.length; i++) {
                var item = data[i];
                html += '<div class="layui-row layui-rowitem" data-id="' + item.id + '">';
                html += '<div class="layui-col-md8" style="line-height: 30px;"><i class="fa fa-folder"></i>' + item.title + "</div>";
                html += workUtils.buildMenu1(item.id, {
                    catalog_edit_favorite: "修改", catalog_delete_favorite: "删除"
                });
                html += "</div>";
            }
            html += '</div>';
            $('#favorite-catalog-data').html(html);
        })
    }

    $(document).ready(function () {
        loadFavoriteCatalog();
    });

    layui.use(['table', 'upload'], function () {
        table = layui.table;
        var upload = layui.upload;
        upload.render({ //允许上传的文件后缀
            elem: '#test3'
            , url: '../favorite/import'
            , accept: 'file' //普通文件
            , size: 2048
            , exts: 'html' //只允许上传压缩文件
            , done: function (res) {
                workUtils.msg(res,function () {
                    loadFavorite(catalogId);
                });
            }
        });
        table.render({
            elem: '#table-favorite'
            , url: '../favorite/list'
            , height: 'full-100'
            , page: true
            ,pageauto:true
            , cols: [[
                {field: 'title', title: '标题'}
                , {field: 'created', title: '时间', width: 150, sort: true}
                , {fixed: 'right', width: 150, align: 'center', toolbar: '#barSetting'}
            ]]
            , cell: function (field, item) {
                if (field == "created") {
                    return workUtils.toDate(item.created);
                } else if (field == "title") {
                    return '<a href="' + item.url + '" target="_blank">' + item.title + '</a>';
                }
                return item[field];
            }
        });
        //监听工具条
        table.on('tool(table-favorite)', function (obj) {
            var data = obj.data;
            if (obj.event === 'edit') {
                workUtils.put("id", data.id);
                workUtils.open({url: "../web/favorite/edit.html", title: "修改"}, function () {
                    table.reload("table-favorite");
                });
            } else if (obj.event === 'delete') {
                workUtils.delete('../favorite/delete/' + data.id, function () {
                    loadFavorite(catalogId);
                })
            }
        });
    });

</script>
</body>
</html>